<template>
  <div>
    <form-box headText="头信息">
      <el-button
        slot="btn"
        v-if="!reqData.quote_head.quote_id"
        type="primary"
        size="small"
        style="float:right"
        @click.native="showReferHisQuote">参考历史报价单</el-button>
      <el-button
        slot="btn"
        v-if="reqData.quote_head.quote_id"
        type="success"
        size="small"
        style="float:right"
        @click.native="showCompute">关联核算单</el-button>
      <el-form-item label="客户名称" label-width="90px">
        <!--<el-input v-model="reqData.quote_head.cst_name"></el-input>-->
        <el-select v-model="reqData.quote_head.cst_name"
                   clearable
                   filterable
                   remote
                   :remote-method="remoteMethod_cstName"
                   :loading="cstNameSearchLoading"
                   @change="selectCstNameChange"
                   placeholder="客户名称">
          <el-option
            v-for="item in options_search_headCstName"
            :key="item.cst_company_id"
            :label="item.cst_name"
            :value="item.cst_company_id">
          </el-option>
        </el-select>
      </el-form-item><br/>
      <el-form-item label="报价单号" label-width="90px">
        <el-input v-model="reqData.quote_head.quote_no" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="报价日期" label-width="90px">
        <el-input v-model="reqData.quote_head.quote_date" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="报价员" label-width="90px">
        <el-input v-model="reqData.quote_head.handler_name"></el-input>
      </el-form-item>
      <el-form-item label="业务员" label-width="90px">
        <el-input v-model="reqData.quote_head.salesman_name"></el-input>
      </el-form-item>
      <el-form-item label="致" label-width="90px">
        <el-input v-model="reqData.quote_head.connect_man"></el-input>
      </el-form-item>
      <el-form-item label="Email" label-width="90px">
        <el-input v-model="reqData.quote_head.email"></el-input>
      </el-form-item>
      <el-form-item label="客户联系人电话" label-width="90px">
        <el-input v-model="reqData.quote_head.phone"></el-input>
      </el-form-item>
      <el-form-item label="产品名称" label-width="90px">
        <el-input v-model="reqData.quote_head.prod_name"></el-input>
      </el-form-item>
      <el-form-item label="货币名称" label-width="90px">
        <el-input v-model="reqData.quote_head.coin_name"></el-input>
      </el-form-item>
      <el-form-item label="货币编码" label-width="90px">
        <el-input v-model="reqData.quote_head.coin"></el-input>
      </el-form-item>
      <el-form-item label="报价有效期" label-width="90px">
        <el-input v-model="reqData.quote_head.avail_days"></el-input>
      </el-form-item>
    </form-box>

    <!-- 参考历史报价单弹窗 -->
    <el-dialog title="参考历史报价单" :visible.sync="isShowQuote" size="large" top="5%">
      <div class="filter-container" style="padding-bottom: 10px;display: flex">
        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="报价单审批环节" v-model="req_quote.query.approve_step">
        </el-input>
        <el-select v-model="req_quote.query.cst_company_id"
                   filterable
                   multiple
                   remote
                   reserve-keyword
                   :remote-method="remoteMethod"
                   :loading="companySearchLoading"
                   placeholder="客户公司(可多选)">
          <el-option
            v-for="item in options_search"
            :key="item.cst_company_id"
            :label="item.cst_company_name"
            :value="item.cst_company_id">
          </el-option>
        </el-select>

        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="产品名称" v-model="req_quote.query.prod_name">
        </el-input>
        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="报价单号" v-model="req_quote.query.quote_no">
        </el-input>
        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="业务员" v-model="req_quote.query.salesman">
        </el-input>
        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="开始日期" v-model="req_quote.query.start_date">
        </el-input>
        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="结束日期" v-model="req_quote.query.end_date">
        </el-input>
        <el-input
          @keyup.enter.native="handleFilter_quote"
          style="width: 200px;"
          class="filter-item"
          placeholder="报价单类型" v-model="req_quote.query.type">
        </el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="handleFilter_quote">搜索</el-button>
      </div>
      <!-- 展示数据的table -->
      <el-table
        :data="list_quote"
        v-loading.body="listLoading_quote"
        element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">

        <el-table-column align="center" label="报价单id" max-width="250px">
          <template scope="scope">
            <span>{{scope.row.quote_id}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="客户名称">
          <template scope="scope">
            <span>{{scope.row.cst_name}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="报价单编号">
          <template scope="scope">
            <span>{{scope.row.quote_no}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" max-width="250px">
          <template scope="scope">
            <el-button type="primary"
                       @click.native='referHisQuote(scope.row.quote_id)'
                       size="small">参考</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="pagination-container" style="margin-top: 30px;">
        <el-pagination @size-change="handleSizeChange_quote" @current-change="handleCurrentChange_quote" :current-page.sync="req_quote.curr_page"
                       :page-sizes="[1, 2, 3, 5]" :page-size="req_quote.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_count">
        </el-pagination>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowQuote = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 关联核算单弹窗 -->
    <el-dialog v-if="reqData.quote_head.quote_id" title="关联核算单" :visible.sync="isShowReferenceCompute" size="large" top="5%">
      <div class="filter-container" style="padding-bottom: 10px;display: flex">
        <el-input
          @keyup.enter.native="handleFilter_compute"
          style="width: 200px;"
          class="filter-item"
          placeholder="核算单号" v-model="req_compute.query.compute_no">
        </el-input>
        <el-select v-model="req_compute.query.approve_step" multiple placeholder="核算单状态(可多选)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="req_compute.query.cst_company_id" multiple placeholder="客户名称(可多选)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
          @keyup.enter.native="handleFilter_compute"
          style="width: 200px;"
          class="filter-item"
          placeholder="产品名称" v-model="req_compute.query.cst_prod_name">
        </el-input>
        <el-select v-model="req_compute.query.type" multiple placeholder="核算单类型(可多选)">
          <el-option
            v-for="item in options_type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="filter-item" type="primary" icon="search" @click="handleFilter_compute">搜索</el-button>
      </div>
      <!-- 展示数据的table -->
      <el-table
        :data="list_compute"
        v-loading.body="listLoading_compute"
        element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">

        <el-table-column align="center" label="核算单id" max-width="250px">
          <template scope="scope">
            <span>{{scope.row.compute_id}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="核算单号">
          <template scope="scope">
            <span>{{scope.row.compute_no}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="客户名称">
          <template scope="scope">
            <span>{{scope.row.cst_company_name}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="核算单类型">
          <template scope="scope">
            <span>{{scope.row.type}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="核算单状态">
          <template scope="scope">
            <span>{{approveStepText(scope.row.approve_step)}}</span>
          </template>
        </el-table-column>

        <el-table-column max-width="250px" align="center" label="审批意见">
          <template scope="scope">
            <span>{{scope.row.approval_sugg}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" max-width="250px">
          <template scope="scope">
            <el-button type="primary"
                       @click='referenceCompute(scope.row.compute_id)'
                       size="small">关联</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="pagination-container" style="margin-top: 30px;">
        <el-pagination @size-change="handleSizeChange_compute" @current-change="handleCurrentChange_compute" :current-page.sync="req_compute.curr_page"
                       :page-sizes="[1, 2, 3, 5]" :page-size="req_compute.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_count">
        </el-pagination>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowReferenceCompute = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import formBox from '../../../../components/formBox'
  import { cstSupSearch } from '@/api/enterprise/supply'
  import { computeList } from '@/api/cstOrder/compute'
  import {
    dictCstCompanyList,
    quoteHeadDetail,
    referHisQuote,
    quoteList,
    relateCompute,
  } from '@/api/cstOrder/quote'

  export default {
    name:'quoteHead',
    components:{
      formBox
    },
    data(){
      return {
        cstNameSearchLoading:false,
        isShowQuote:false,
        isShowReferenceCompute:false,
        listLoading_compute:false,
        listLoading_quote:false,
        companySearchLoading:false,
        total_count:null,//数据总条数
        total_page:null,//总页数
        serachHeadCstNameReqData:{
          client_type:1,
          company_id:'',
          cst_name:''
        },
        options_search_headCstName:[],
        relateComputeData:{
          client_type:1,
          compute_id:'',
          quote_id:''
        },
        referHisQuoteData:{
          client_type:1,
          quote_id_his:''
        },
        searchReqData:{
          client_type:1,
          cst_sup_type:1,//1:company 2:user
          curr_page:1,
          page_size:10
        },
        options_search:[],
        options_type: [{
          value: '1',
          label: '冲压模'
        }, {
          value: '2',
          label: '压铸模'
        }, {
          value: '3',
          label: '注塑模'
        }],
        options: [
          {
            value: 'step10',
            label: '起草'
          },
          {
            value: 'step11',
            label: '退回起草'
          },
          {
            value: 'step20',
            label: '复核'
          },
          {
            value: 'step30',
            label: '审批'
          },
          {
            value: 'step0',
            label: '审批结束'
          }
        ],
        req_quote:{
          client_type:1,
          company_id:'',
          curr_page: 1,
          page_size: 2,
          query:{
            approve_step:null,//审批状态: 10起草中，20复核，30审批，0审批结束
            cst_company_id:[],
            end_date:null,
            prod_name:null,
            quote_no:null,
            salesman:null,
            start_date:null,
            type:'',
          }
        },
        list_compute:[],
        list_quote:[],
        req_compute: {
          client_type:1,
          company_id:'',
          curr_page: 1,
          page_size: 2,
          query:{
            approve_step:[],//审批状态: 10起草中，20复核，30审批，0审批结束
            compute_no:'',
            cst_company_id:[],
            cst_prod_name:'',
            type:[],
          }
        },
        quoteLineList:[]
      }
    },
    props:[
      'reqData',
    ],
    mounted(){
      let quote_id = this.$route.query.quote_id
      if(quote_id){//如果router里quote_id存在则本页面就是编辑状态,需要查询出quote_id对应的报价单信息
        let req = {
          client_type:1,
          quote_id:quote_id
        }
        quoteHeadDetail(req)  //如果路由中带有quote_id 则调用接口取报价单头信息
          .then(res => {
            this.reqData.quote_head = res;
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    methods:{
      approveStepText(status){
        switch (status){
          case 'step10':
            return '起草'
            break;
          case 'step11':
            return '退回起草'
            break;
          case 'step20':
            return '复核'
            break;
          case 'step30':
            return '审批'
            break;
          case 'step0':
            return '审批结束'
          default:
            return '未知'
            break;
        }
      },
      remoteMethod_cstName(query){  //报价单头信息 公司客户搜索 方法
        this.cstNameSearchLoading = true;
        this.serachHeadCstNameReqData.cst_name = query
        dictCstCompanyList(this.serachHeadCstNameReqData)
          .then(res => {
            setTimeout(() => {
              this.cstNameSearchLoading = false;
              this.options_search_headCstName = res.cst_list
            }, 1000 * Math.random());
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
      },
      selectCstNameChange(val){ //报价单头信息公司客户 搜索选框的change事件方法
        if(val !== ''){
          for(let i of this.options_search_headCstName){
            if(i.cst_company_id == val){
              this.reqData.quote_head.cst_company_id = i.cst_company_id
              this.reqData.quote_head.connect_man = i.connect_man
              this.reqData.quote_head.phone = i.phone
              this.reqData.quote_head.cst_name = i.cst_name
              this.reqData.quote_head.email = i.email
            }
          }
        }

      },
      getQuoteList() {
        this.listLoading_quote = true
        quoteList(this.req_quote).then(res => {
          this.list_quote = res.quote_list
          this.total_count = res.total_count
          this.total_page = res.total_page
          this.listLoading_quote = false
        })
      },
      handleFilter_quote(){
        this.req_quote.curr_page = 1
        this.getQuoteList()
      },
      handleSizeChange_quote(val) {
        this.req_quote.page_size = val
        this.getQuoteList()
      },
      handleCurrentChange_quote(val) {
        this.req_quote.curr_page = val
        this.getQuoteList()
      },
      showReferHisQuote(){  //显示参考历史报价单列表弹窗
        this.isShowQuote = true
        this.getQuoteList()
      },
      referHisQuote(quoteId){  //参考历史报价单
        this.referHisQuoteData.quote_id_his = quoteId
        referHisQuote(this.referHisQuoteData)
          .then(res => {
            this.isShowQuote = false
            //this.quoteLineList = res.quote_line_list
            const dataObj = {
              type:1,
              data:res.quote_line_list
            }
            this.$emit('qllChange',dataObj)

            this.reqData.quote_head.quote_id = res.quote_id
            this.reqData.quote_head.quote_no = res.quote_no
            let req = {
              client_type:1,
              quote_id:res.quote_id
            }
            quoteHeadDetail(req)  //参考成功后再调用接口获取报价单行信息
              .then(res => {
                this.reqData.quote_head = res;
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch(err => {
            console.log(err)
          })
      },
      getComputeList() {
        this.listLoading_compute = true
        computeList(this.req_compute).then(res => {
          this.list_compute = res.list
          this.total_count = res.total_count
          this.total_page = res.total_page
          this.listLoading_compute = false
        })
      },
      handleFilter_compute(){
        this.req_compute.curr_page = 1
        this.getComputeList()
      },
      handleSizeChange_compute(val) {
        this.req_compute.page_size = val
        this.getComputeList()
      },
      handleCurrentChange_compute(val) {
        this.req_compute.curr_page = val
        this.getComputeList()
      },
      showCompute(){  //显示关联核算单列表弹窗
        this.isShowReferenceCompute = true
        this.getComputeList()
      },
      referenceCompute(computeId){  //关联核算单
        this.relateComputeData.compute_id = computeId
        this.relateComputeData.quote_id = this.reqData.quote_head.quote_id
        relateCompute(this.relateComputeData)
          .then(res => {
            this.isShowReferenceCompute = false
            //this.quoteLineList.push(res.quote_line_info)
            const dataObj = {
              type:2,
              data:res.quote_line_info
            }
            this.$emit('qllChange',dataObj)

            this.$message({
              type: 'success',
              message: '保存行信息成功,您可以继续添加或关闭页面'
            });
          })
          .catch(err => {
            console.log(err)
            this.$message.error('添加失败!')
          })
      },
      remoteMethod(query) { //参考历史报价单中 公司客户 搜索的方法
        this.companySearchLoading = true;
        this.searchReqData.cst_sup_name = query
        cstSupSearch(this.searchReqData)
          .then(res => {
            setTimeout(() => {
              this.companySearchLoading = false;
              this.options_search = res.cst_sup
            }, 1000 * Math.random());
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
